<template>
  <div class="content-view">
    <div id="right-CAD" class="right-CAD"></div>
  </div>
</template>

<script>
import * as svg_opt from "@/utils/svg_opt.js";

// 导出模块
export default {
  // 模块名字
  name: "template",
  // 模块数据
  data() {
    //数据
    return {
      isSvgLoaded: false,
      markupFileUrl: "/markup_layers.xml",
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    loadSvg() {
      svg_opt.setSvgLineWidthRatio(1.5);
      svg_opt.setSvgBoundingBoxRatio(0, 0, 0.9);
      // svg_opt.setCanClickSelectMarkup(true,[1,2,3,4,5,6,7,8,9,10,11,12]);
      svg_opt.setCanClickSelectMarkup(true);

      svg_opt.setCanEditSelectMarkup(false);
      svg_opt.setEditDotWidthRatio(3);
      //   svg_opt.setSelectCallBack(this.updateWhenMarkupSelected);
      svg_opt.AddSvg(this.svgSourceUrl, "right-CAD", null);
      svg_opt.SetSvgMouseMode(0);
      svg_opt.setLoadCallBack(this.onSvgLoaded);
    },

    onSvgLoaded() {
      this.isSvgLoaded = true;
      svg_opt.changeSvgElementData({
        tagName: "img-content",
        paramName: "xlink:href",
        newValue:
          //   "http://morefun-active-1.oss-cn-shanghai.aliyuncs.com/mmsVr/scene_1/sky_dome_0803.png",
          "rect_test.png",
      });

      this.loadMarkupFile(this.markupFileUrl);
    },

    /**
     * 加载xml到图纸中
     */
    loadMarkupFile(filePath) {
      let res = svg_opt.loadMarkupsFromFile(filePath);
      if (!res) {

        this.$alert(this.$t("message.cadViewer.loadMarkupFileError"), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
      }
    },
  },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
    this.loadSvg();
  },
};
</script>
<style lang="scss" scoped>
/**
 * 导入css样式组件
 * @import "../assets/css/components/index.css";
 */
.content-view {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;

  .right-CAD {
    float: left;
    margin-top: 15px;
    width: 90%;
    height: 80%;
    border: solid 1px #555555;
  }
}
</style>
